// 获取DOM元素
var main = document.querySelector('main');

var wrap = document.querySelector('.wrap');
var section = document.querySelectorAll('section');
var item = document.querySelectorAll('.item');

var nav = document.querySelector('nav');

var finds = document.querySelector('.finds');

var tasty = document.querySelector('.tasty');
var introduce = document.querySelector('.introduce');
var details = document.querySelectorAll('.details');

var title = document.querySelectorAll('.title');
var english = document.querySelectorAll('.english');

var company = document.querySelector('.company');
var companyIdc = document.querySelector('.company-idc');
var companyImg = document.querySelector('.company-img');

var searchImg = document.querySelectorAll('.search-img');
var searchTitle = document.querySelectorAll('.search-title');
var searchTxt = document.querySelectorAll('.search-txt');

var more = document.querySelectorAll('.more');

var wheelBack = document.querySelector('.wheel-back');
var wheelForward = document.querySelector('.wheel-forward');
var bgtiao = document.querySelector('.bgtiao');
var dong = document.querySelector('.dong');


// ______________________________满屏轮播______________________________
var timeId = null;
var flag = true;
var count = 0;
var num = 0;
// 滚轮轮播
window.addEventListener('mousewheel', function(e) {
    var e = e || window.event;
    // 旗帜为true进入if语句进行事件处理
    if (flag) {
        flag = false;
        if (e.wheelDelta < 0) {
            count++;
            num++;
            // 当视图为最后一张时重置为第一张。
            if (count > section.length - 1) {
                count = 0;
            }
            // 当焦点为最后一个时重置为第一个
            if (num > item.length - 1) {
                num = 0;
            }
        } else {
            count--;
            num--;
            // 当视图为第一张时向上滑不滑动。
            if (count < 0) {
                count = 0;
            }
            // 当焦点为第一个时向上滑不变。
            if (num < 0) {
                num = 0;
            }
        }
        // 排他
        for (var i = 0; i < item.length; i++) {
            item[i].className = 'item';
        }
        item[num].className = 'item item-on';
        wrap.style.top = -count * section[0].offsetHeight + "px";
        // 超时后再赋值为true进入if语句
        setTimeout(function() {
            flag = true;
        }, 1000)
    }
    // 首页动画
    shouye();
    // 标题动画
    biaoti();
    yingyu();
    // 关于我们动画
    aboutus();
    // 优质服务动画
    youzhi();
    // 查看更多动画
    seemore();
})

// 焦点轮播
for (var i = 0; i < item.length; i++) {
    item[i].index = i;
    item[i].onclick = function() {
        // 排他
        for (var i = 0; i < item.length; i++) {
            item[i].className = 'item';
        }
        this.className = 'item item-on';
        wrap.style.top = -this.index * section[0].offsetHeight + "px";
        // 将焦点轮播与滚轮轮播绑定
        count = this.index;
        num = this.index;
        // 首页动画
        shouye();
        // 标题动画
        biaoti();
        yingyu();
        // 关于我们动画
        aboutus();
        // 优质服务动画
        youzhi();
        // 查看更多动画
        seemore();
    }
}


// ______________________________获取main的高度______________________________
main.style.height = window.innerHeight - 1 + 'px';
window.onresize = function() {
    main.style.height = window.innerHeight - 1 + 'px';
}


// ______________________________封装鼠标移入效果方法______________________________
function hover(dom, cname) {
    for (var i = 0; i < dom.children.length; i++) {
        dom.children[i].onmouseenter = function() {
            // 排他
            for (var j = 0; j < dom.children.length; j++) {
                dom.children[j].className = '';
            }
            this.className = cname;
        }
    }
    dom.onmouseleave = function() {
        // 排他
        for (var j = 0; j < dom.children.length; j++) {
            dom.children[j].className = '';
        }
        dom.children[0].className = cname;
    }
}

hover(nav, 'on');
hover(finds, 'active');


// ______________________________公司简介滚轮______________________________
var rel = 0;
wheelForward.onclick = function() {
    console.log('rel:' + rel);
    if (dong.offsetTop >= (bgtiao.offsetHeight - dong.offsetHeight)) {
        rel = 100;
        rel2 = 125;
    }
    rel += 25;
    dong.style.top = rel + 'px';
}
var rel2 = 125;
wheelBack.onclick = function() {
    console.log('rel2:' + rel2);
    if (dong.offsetTop <= 0) {
        rel2 = 25;
        rel = 0;
    }
    rel2 -= 25;
    dong.style.top = rel2 + 'px';
}


// ______________________________首页动画______________________________
function shouye() {
    if (count == 0) {
        tasty.style.transform = 'rotateY(360deg)';
        introduce.style.transform = 'scale(1)';
        details[0].style.transform = 'translateX(0px)';
        details[1].style.transform = 'translateX(0px)';
    } else {
        tasty.style.transform = 'rotateY(180deg)';
        introduce.style.transform = 'scale(0.000001)';
        details[0].style.transform = 'translateX(-773px)';
        details[1].style.transform = 'translateX(744px)';
    }
}
// 打开网页时首页显示动画
window.onload = function() {
    shouye();
}


// ______________________________标题动画______________________________
function biaoti() {
    for (var i = 1; i < section.length; i++) {
        if (count == i) {
            title[i - 1].style.transform = 'translateY(0px)';
        } else {
            title[i - 1].style.transform = 'translateY(-180px)';
        }
    }
}

function yingyu() {
    for (var i = 1; i < section.length; i++) {
        if (count == i) {
            english[i - 1].style.transform = 'translateY(0px)';
        } else {
            english[i - 1].style.transform = 'translateY(-230px)';
        }
    }
}


// ______________________________关于我们动画______________________________
function aboutus() {
    if (count == 1) {
        company.style.transform = 'translateX(0px)';
        companyIdc.style.transform = 'translateX(0px)';
        companyImg.style.transform = 'translateX(0px)';
    } else {
        company.style.transform = 'translateX(-968px)';
        companyIdc.style.transform = 'translateX(-968px)';
        companyImg.style.transform = 'translateX(668px)';
    }
}


// ______________________________优质服务动画______________________________
function youzhi() {
    if (count == 2) {
        for (var i = 0; i < searchImg.length; i++) {
            searchImg[i].style.transform = 'translateX(0px)';
            searchTitle[i].style.transform = 'translateX(0px)';
            searchTxt[i].style.transform = 'translateX(0px)';
        }

    } else {
        searchImg[0].style.transform = 'translateX(-501px)';
        searchTitle[0].style.transform = 'translateX(-501px)';
        searchTxt[0].style.transform = 'translateX(-501px)';
        searchImg[1].style.transform = 'translateX(-939px)';
        searchTitle[1].style.transform = 'translateX(-939px)';
        searchTxt[1].style.transform = 'translateX(-939px)';
        searchImg[2].style.transform = 'translateX(600px)';
        searchTitle[2].style.transform = 'translateX(600px)';
        searchTxt[2].style.transform = 'translateX(600px)';
    }
}


// ______________________________查看更多动画______________________________
function seemore() {
    for (var i = 3; i < section.length; i++) {
        if (count == i) {
            more[i - 3].style.transform = 'translateY(0px)';
        } else {
            more[i - 3].style.transform = 'translateY(60px)';
        }
    }
}